<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>报名信息展示</title>
  <script src="js/axios-0.21.0.js"></script>
  <script src="js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
  <el-row>
    <el-col :span="6">
      <span style="font-size:30px">高校运动会管理系统</span>
    </el-col>
    <el-col :span="18">
      <el-menu :default-active="activeIndex" mode="horizontal">
        <el-menu-item index="1"><el-link href="index.html">首页</el-link></el-menu-item>
        <el-submenu index="2">
          <template slot="title">运动员管理</template>
          <el-menu-item index="2-1"><el-link
                  :href="'athletesList.html?role='+role">运动员列表</el-link></el-menu-item>
          <el-menu-item index="2-2" v-if="role==0"><el-link
                  :href="'athletesAdd.html?role='+role">添加运动员</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">裁判管理</template>
          <el-menu-item index="3-1"><el-link
                  :href="'judgeList.html?role='+role">裁判列表</el-link></el-menu-item>
          <el-menu-item index="3-2" v-if="role==0"><el-link
                  :href="'judgeAdd.html?role='+role">增加裁判</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">比赛项目管理</template>
          <el-menu-item index="4-1"><el-link
                  :href="'itemList.html?role='+role">比赛项目列表</el-link></el-menu-item>
          <el-menu-item index="4-2" v-if="role==0"><el-link
                  :href="'itemAdd.html?role='+role">增加比赛项目</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">场地管理</template>
          <el-menu-item index="5-1"><el-link
                  :href="'GroundList.html?role='+role">场地列表</el-link></el-menu-item>
          <el-menu-item index="5-2" v-if="role==0"><el-link
                  :href="'GroundAdd.html?role='+role">增加场地</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">留言管理</template>
          <el-menu-item index="6-1"><el-link
                  :href="'commentList.html?role='+role">留言查询</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">报名管理</template>
          <el-menu-item index="7-1"><el-link
                  :href="'registerList.html?role='+role">报名查询</el-link></el-menu-item>
          <el-menu-item index="7-2" v-if="role==2"><el-link
                  :href="'registerAdd.html?role='+role">报名</el-link></el-menu-item>
          <el-menu-item index="7-3" v-if="role==0 || role ==1"><el-link
                  :href="'registerListAll.html?role='+role">报名审批</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="8">
          <template slot="title">成绩管理</template>
          <el-menu-item index="8-1"><el-link @click="dialogAthletes=true">查询成绩</el-link></el-menu-item>
          <el-menu-item index="8-2" v-if="role==0 || role ==1"><el-link @click="dialogItems=true">录入成绩</el-link></el-menu-item>
          <el-menu-item index="8-3" v-if="role==2"><el-link @click="dialogItems=true">根据项目查询成绩</el-link></el-menu-item>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title">个人中心</template>
          <el-menu-item index="9-1" @click="logout">退出</el-menu-item>
          <el-menu-item index="9-2" @click="userEdit(id)">编辑</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-bottom: 10px">
    <el-col :span="18">
      <el-row>
        <div style="display: flex; align-items: center;">
          <el-input placeholder="请输入比赛项目名称" v-model="name"
                    style="width: 500px; margin-right: 10px;"></el-input>
          <el-button type="primary" @click="showRegister(name,1,pageSize)">查询</el-button>
        </div>
      </el-row>
    </el-col>
  </el-row>
  <el-table
          :data="registerList"
          border
          stripe
          style="width: 100%">
    <el-table-column
            header-align="center"
            align="center"
            prop="registerId"
            label="报名编号"
    >
    </el-table-column>
    <el-table-column
            header-align="center"
            align="center"
            prop="athletesId"
            label="运动员Id"
    >
    </el-table-column>
    <el-table-column
            prop="itemList[0].itemName"
            label="比赛项目"
    >
    </el-table-column>
    <el-table-column
            prop="itemList[0].date"
            label="比赛日期">
    </el-table-column>
    <el-table-column
            prop="itemList[0].location"
            label="举办地址"
    >
    </el-table-column>
    <el-table-column
            prop="status"
            label="报名状态"
            :formatter="formatStatus">
    </el-table-column>
    </el-table-column>
    <el-table-column
            header-align="center"
            align="center"
            label="操作"
            v-if="role==2"
    >
      <!-- 自定义列模板-->
      <template  slot-scope="scope">
        <el-button size="mini" type="primary" @click="del(scope.row.registerId)" >取消报名</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"

          :page-size="pageSize"
          :total="total"
          :current-page="pageNum"

          prev-text="上一页"
          next-text="下一页"

          layout="total, prev, pager, next, jumper">
  </el-pagination>
  <!--    查询成绩-->
  <el-dialog title="提示" :visible.sync="dialogAthletes" width="30%">
    <el-form ref="form" :model="scaaa" label-width="80px">
      <el-form-item label="运动员名">
        <el-input v-model="scaaa.athletesName" placeholder="请输入运动员名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="showByAthletesName">查询</el-button>
        <el-button @click="dialogAthletes=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="提示" :visible.sync="dialogItems" width="30%">
    <el-form ref="form" :model="scaaa" label-width="80px">
      <el-form-item label="项目名">
        <el-input v-model="scaaa.itemName" placeholder="请输入项目名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="showByItemName">查询</el-button>
        <el-button @click="dialogItems=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
<script type="text/javascript">
  new Vue({
    el:"#app",
    data:{
      id:-1,
      name:"",
      activeIndex:"7-1",
      registerList:[],
      pageNum:1,
      pageSize:10,
      total:0,
      dialogAthletes:false,
      dialogItems:false,
      scaaa:{ // 为了在顶部的成绩管理弹出对话框
        athletesName:"",
        itemName:""
      },
      ids:[],
      role:""
    },
    created(){
      let queryString = window.location.search;
      let urlParams = new URLSearchParams(queryString);
      this.role = urlParams.get('role');
      this.showRegister(this.name,1,10)
      axios.get('user/getUser').then(res =>{
        if(this.role === '0'){
          this.id=res.data.user.adminId
        } else if(this.role === '1'){
          this.id=res.data.user.judgeId
        } else if(this.role === '2'){
          this.id=res.data.user.athletesId
        }
      })
    },
    methods:{
      showByAthletesName(){
        location.href="sc111.html?athletesName="+this.scaaa.athletesName + "&role="+this.role
      },
      showByItemName(){
        location.href="sc222.html?itemName="+this.scaaa.itemName  + "&role="+this.role
      },
      logout(){
        axios.get('http://localhost:8080/user/logout')
                .then(resp=>{
                  if(resp.data.message=='success'){
                    alert(resp.data.message)
                    location.href='login.html';
                  }else{
                    alert(resp.data.message)
                  }
                }).catch(error=>console.log(error))
      },
      handleSizeChange(pageNum){
        this.pageSize=pageNum
        this.showRegister(this.name,this.pageNum,this.pageSize)
      },
      handleCurrentChange(current){
        this.pageNum = current
        this.showRegister(this.name,this.pageNum,this.pageSize)
      },
      formatStatus(row, column, cellValue) {
        // 根据状态值返回对应的文本
        return cellValue === 0 ? '未审批' : '审批通过';
      },
      showRegister(name,pageNum,pageSize){
        this.pageNum = pageNum
        this.pageSize = pageSize
        axios.get(`http://localhost:8080/register/showRegisterByAthletesId/${this.pageNum}/${this.pageSize}?name=`+name)
                .then(resp=>{
                  this.registerList=resp.data.registerList;
                  this.pageSize = resp.data.pageSize
                  this.pageNum = resp.data.pageNum
                  this.total = resp.data.total
                  console.log(this.registerList);
                  console.log(this.registerList[0].itemList[0].date);
                  console.log(this.registerList[0].itemList);
                }).catch(error=>{
          console.log(error);
        })
      },
      userEdit(id) {
        location.href = "athletesUpdate.html?id=" + id + "&role=" + this.role;
      },
      del(id){
        this.$confirm('您确定要取消报名吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          axios.delete(`http://localhost:8080/register/removeRegister/${id}`)
                  .then(resp=>{
                    if(resp.data.message=='success') {
                      //消息框  message
                      this.$message({
                        type: 'success',
                        showClose:true,//属性  取消自动关闭  默认自动关闭  时间为3s
                        message: resp.data.message,
                      });
                      window.location.reload();
                      this.showAthletes(1,10)
                    }else{
                      this.$message({
                        type:'error',
                        showClose:true,
                        message:resp.data.message
                      })
                    }
                  }).catch(error=>console.log(error))
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    }
  })
</script>
</body>
</html>
